<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ include file="/WEB-INF/jsp/common/taglib.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>product_edit</title>
<script src="<c:url value="/ui/jquery-1.10.2.js" />"></script>
<script src="<c:url value="/ui/jquery-migrate-1.2.1.js" />"></script>

<link rel="stylesheet" href="<c:url value="/demo/jquery.ui.all.css"/>">
<link href="<s:url value="/css/standard.css" />" rel="stylesheet"
	type="text/css" />
<link href="<s:url value="/css/pop_up.css" />" rel="stylesheet"
	type="text/css" />
<link href="<s:url value="/css/maintenance.css" />" rel="stylesheet"
	type="text/css" />
<link href="<s:url value="/css/Simplemodal.css" />" rel="stylesheet"
	type="text/css" />

<script src='<c:url value="/js/jquery.DynamicMessage.js" />'></script>
<script src='<c:url value="/js/jquery.simplemodal-1.4.1.js" />'></script>

<script src='<c:url value="/js/common.js" />'></script>
<script src='<c:url value="/js/common_ui.js" />'></script>
<script src='<c:url value="/js/poplayer.js" />'></script>
<script src='<c:url value="/js/maint_ui.js" />'></script>
<script src='<c:url value="/js/jquery.form.js" />'></script>

<script src="<c:url value="/ui/jquery.ui.core.js" />"></script>
<script src="<c:url value="/ui/jquery.ui.widget.js" />"></script>
<script src="<c:url value="/ui/jquery.ui.datepicker.js" />"></script>
<!--  <script src="<c:url value="/ui/jquery-ui-timepicker-addon.js" />"></script>-->

<script src="<c:url value="/ui/jquery-ui-slide.min.js" />"></script>
<link rel="stylesheet" href="<c:url value="/demo/demos.css" />">
<link rel="stylesheet" href="<c:url value="/demo/dateTime.css" />">

<script type="text/javascript">
$(function() {

	$('.example').datepicker({
		changeMonth : true,
		changeYear : true
	});

})
</script>

</head>

<hr>


<form:form method="put" name="editForm" id="editForm"
	onsubmit="return doSubmit('${ product.id }')">

	<table width="100%" border="0" cellspacing="0" cellpadding="0"
		class="problemDes">
		<tr>
			<td width="40%">
				<table cellspacing="2" cellpadding="2" border="0" width="100%">
					<tr>
						<td class="labelText" style="width: 20px">name:</td>
						<td style="width: 50px"><input name='name' class='check'
							value="${ product.name }" id='name'>
							<p style="color: red" id="nameMessage"></p></td>

					</tr>
					<tr>
						<td class="labelText" style="width: 20px">code:</td>
						<td style="width: 50px"><input name='code' class='check'
							value="${ product.code }" id='code'>
							<p style="color: red" id="codeMessage"></p></td>

					</tr>
					
					<tr>
						<td class="labelText" style="width: 20px">price:</td>
						<td style="width: 50px"><input name='productPrice' class='check'
							value="${ product.productPrice }" id='productPrice'>
							<p style="color: red" id="productPriceMessage"></p></td>
					</tr>
					
					<tr>
						<td class="labelText" style="width: 150px;height:80px ">ingredient:</td>
						<td style="width: 50px ;height:80px"><textarea rows="5" cols="30" style="resize: none;"
									name='ingredient' class='check' id='ingredient'>${ product.ingredient }</textarea>
							<p style="color: red" id="ingredientMessage"></p></td>

					</tr>
					
					<tr>
						<td class="labelText" style="width: 150px;height:80px " >remark:</td>
						<td style="width: 50px"><textarea rows="5" cols="30" style="resize: none;"
									name='remark' class='check' id='remark'>${ product.remark }</textarea>
							<p style="color: red" id="remarkMessage"></p></td>

					</tr>
					
					<tr>
						<td width="80px" class="labelText">createDate:</td>
						<td><input name='createDate'
							value="<fmt:formatDate
											value='${ product.createDate }'
											pattern="MM/dd/yyyy" />"
							style="width: 100px;" class="example">
							<p id="createDateMessage" style="color: red"></p></td>

					</tr>
					<tr>
						<td width="80px" class="labelText">expireDate:</td>
						<td><input name='expireDate'
							value="<fmt:formatDate
											value='${product.expireDate }'
											pattern="MM/dd/yyyy" />"
							style="width: 100px; " class="example">
							<p id="expireDateMessage" style="color: red; text-align: center;"></p</td>

					</tr>
					
					<tr>
						<td><input type="hidden" value="${product.attachmentId }"
							name="attachmentId" id="attachmentId"></td>
					</tr>

				</table> </form:form>
			</td>
			<td><img alt="头像" src="<c:url value ="/attachment/${product.attachmentId}/downLoad" />"
				width="250px" height="250px" id="img"> <br> <br> <form:form
					method="post" enctype="multipart/form-data" id="savefile">
					<input type="file" name="file" id="file"
						style="background: white; width: 250px">
					<input name="moduleName" id="moduleName" value="product"
						type="hidden">
					<input type="submit" value="上传" id="upload">
				</form:form></td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<table>
					<tr>
						<td valign="top" class="buttonRow"><input type="submit"
							value=" Submit " /></td>
						<td valign="top" class="buttonRow"><input type="button"
							value=" Back " class="button" name="blGo2242" onclick="toBack();" /></td>
					</tr>
				</table>
			</td>
		</tr>
	</table>



	<script type="text/javascript">
		$("input.check").blur(function() {
			check();

		});
		var numCheckResult = false;
		var letterCheckResult = true;
		var nameResult = true;
		var codeResult = true;

		function check() {
			var name = $('#name').val().split("").length;

			var code = $('#code').val().split("").length;

			if (name > 0) {
				$('#nameMessage').text("")
			}

			if (code > 0) {
				$('#codeMessage').text('');
			}
		}

		var num = [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '+', '-',
				'*', '_', '.' ];
		var letter = [ 'a', 'A', 'b', 'B', 'c', 'C', 'd', 'D', 'e', 'E', 'f',
				'F', 'g', 'G', 'h', 'H', 'i', 'I', 'j', 'J', 'k', 'K', 'l',
				'L', 'm', 'M', 'n', 'N', 'o', 'O', 'p', 'P', 'q', 'Q', 'r',
				'R', 's', 'S', 't', 'T', 'u', 'U', 'v', 'V', 'w', 'W', 'x',
				'X', 'y', 'Y', 'z', 'Z', '+', '-', '*', '_', '.', ' ' ]

		function numCheck(obj) {
			$.each(obj, function(key, value) {
				if ($.inArray(value, num) < 0) {//存在非数字时，结果为假

					numCheckResult = false;
					return false;
				} else {

					numCheckResult = true;

				}
			})
		}
		function letterCheck(obj) {
			$.each(obj, function(key, value) {
				if ($.inArray(value, letter) < 0) {//存在非字母时，结果为假

					letterCheckResult = false;
					return false;
				} else {
					letterCheckResult = true;

				}
			})
		}

		var numPrice = [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.' ];

		function numCheckPrice(obj) {
			$.each(obj, function(key, value) {
				if ($.inArray(value, numPrice) < 0) {// 存在非数字时，结果为假

					$('#productPrice').val('0');
					return false;
				}
			})
			
			if (obj.length==0){
				$('#productPrice').val('0');
			}
		}
		
		function doSubmit(id) {
			var productPrice =  $('#productPrice').val().split("");
			
			numCheckPrice(productPrice);
			
			nameCheck();
			codeCheck();

			if (nameResult & codeResult) {

				editForm.action = "<c:url value='/product/'/>" + id;

				return true;
			} else {
				return false;
			}

		}

		function nameCheck() {
			var name = $('#name').val().split("").length;
			if(name >0&name<50){
				nameResult = true;
				return false;
			}else if(name<=0){
				$("p#nameMessage").text("信息必填");
				nameResult=false;
				return false ;
			}else {
				nameResult=false ;
				$("p#nameMessage").text("信息有误。可能太长！");
				return false;
			}
			
		}

		function codeCheck() {
			var code = $('#code').val().split("").length;
			if (code > 0 & code < 50) {
				codeResult = true;
				return false;
			} else if (code <= 0) {
				$("p#codeMessage").text("信息必填");
				codeResult = false;
				return false;
			} else {
				codeResult = false;
				$("p#codeMessage").text("信息有误。可能太长！");
				return false;
			}

		}

		function toBack() {
			self.location = "<c:url value='/product/page'/>"
		}

		$("#upload").click(
				function() {
					$('#savefile').attr('action',
							'<c:url value ="/attachment/upload" />')

					$('#savefile').ajaxSubmit(
							{
								dataType : 'json',
								success : function(msg) {

									
									var id = msg.id;

									$("#attachmentId")
											.attr("value",
													id);
									$("#img")
											.attr(
													"src",
													"<c:url value='/' />"
													+ "attachment/" + id
													+ "/downLoad");
								}
							});

					$("#file").val("");//清空文件域
					return false; //防止刷新？
				})
	</script>

	</body>
</html>